<html>
<head>
	<title>Interactive Museum Exhibit - HCI Assignment 3 Demo</title>
	<link type="text/css" href="css/smoothness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
	<link type="text/css" href="css/jquery.hint.css" rel="stylesheet" />
	<link type="text/css" href="css/jquery.verticaltabs.css" rel="stylesheet" />
	<link type="text/css" href="css/exhibit.css" rel="stylesheet" />
	<script type="text/javascript" src="js/logger.js"></script>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.hint.js"></script>
	<script type="text/javascript" src="js/jquery.annotate.js"></script>
	<script type="text/javascript" src="js/jquery.verticaltabs.js"></script>
	<script type="text/javascript" src="data/data.js"></script>
	<script type="text/javascript" src="js/exhibit.js"></script>
</head>

<body>

	<!-- MAIN PANEL -->

	<div id="content">
	
		<!-- ROOM SELECTOR -->
		<div id="rooms">
			<div class="ui-heading">&nbsp;<br/>Rooms</div>
			<div id="rooms-tabs"></div>
		</div>
		
		<!-- ROOM PLACEHOLDER -->
		<div id="room">
			<div class="ui-heading">
				Device Datelines
				<div class="ui-subheading">Technology so far, and what's expected</div>
			</div>
			<img id="room-img" class="room-img" src="" />
		</div>
		
		<!-- CATEGORY SELECTOR -->
		<div id="devices">
			<div class="ui-heading"><br/>Devices</div>
			<div id="devices-accordion">
				<h3><a href="#">Communication</a></h3>
				<div>
					<ul>
						<li>Internet</li>
						<li>Telephone</li>
					</ul>
				</div>
				<h3><a href="#">Entertainment</a></h3>
				<div>
					<ul>
						<li>Television</li>
						<li>Sound System</li>
						<li>Radio</li>
						<li>Still Camera</li>
						<li>Video Camera</li>
					</ul>
				</div>
				<h3><a href="#">Productivity</a></h3>
				<div>
					<ul>
						<li>Desktop Computer</li>
						<li>Smart Phone</li>
						<li>Personal Organiser</li>
						<li>Storage Media</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="timeline">
			<div id="year">2011</div>
			<div id="slider-container">
				<div id="years">
					<span>1950</span>
					<span>1960</span>
					<span>1970</span>
					<span>1980</span>
					<span>1990</span>
					<span>2000</span>
					<span>2010</span>
					<span>2020</span>
					<span>2030</span>
				</div>
				<div id="slider"></div>
			</div>
			<!-- <div id="sponsor">
				Exhibit Sponsored by
				<br/>
				<img src="images/logo/HCI-logo.png" width="80" height="35" />
				<img src="images/logo/smartplanet.gif" width="35" height="35" />
				<br/>
				Design a better world
			</div>     -->
			<div id="help-container">
				<a href="#" id="help"><img src="images/icons/help.png" width="45" height="45"/><br/>Help</a>
			</div>
		</div>
	</div>
	
	
	<!-- DETAILS DIALOG -->
	
	<div id="dialog" title="Device Details">
		<div id="dialog-image-container">
			<img id="dialog-image" src="images/devices/iphone.png" />
		</div>
		<div id="dialog-tabs">
			<ul>
				<li><a href="#dialog-tabs1">Overview</a></li>
				<li><a href="#dialog-tabs2">Initial Development</a></li>
				<li><a href="#dialog-tabs3">Important Milestones</a></li>
				<li><a href="#dialog-tabs4">Related Technology</a></li>
			</ul>
			<div id="dialog-tabs1">
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate vestibulum justo vel pharetra. Duis orci ante, dictum hendrerit malesuada in, imperdiet sollicitudin lectus. Nam quis dolor nec nibh tincidunt feugiat vel sed orci. Fusce magna magna, vestibulum at viverra sed, iaculis sit amet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis sollicitudin est vitae blandit. Sed metus odio, venenatis nec dignissim nec, sagittis in arcu.
				</p><p>
				Etiam eget orci velit, tempus pharetra dui. Nullam tincidunt mattis ipsum, at feugiat leo condimentum eu. Aliquam bibendum est sit amet quam iaculis lobortis. Duis pellentesque, nisi sed porttitor bibendum, massa tellus tincidunt neque, eget consequat neque tellus sit amet leo. Donec ac lacus vitae felis pharetra tincidunt. Pellentesque lobortis, sem sit amet ullamcorper consequat, nisi odio gravida enim, at rhoncus dolor lectus ut tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec scelerisque eros vitae tortor pharetra lobortis. In euismod pulvinar nisi, a vulputate lacus lobortis euismod. Aliquam tincidunt nibh imperdiet risus ornare luctus. Sed a justo ipsum. Etiam dapibus hendrerit nunc, non adipiscing leo sollicitudin at.
				</p><p>
				Nullam pulvinar interdum risus. Proin est felis, aliquet pretium posuere ut, viverra a neque. Duis dui sem, mollis et vestibulum eu, mattis in mi. Suspendisse bibendum ultrices elit eget feugiat. Proin auctor porttitor porttitor. In massa lacus, tempor in fermentum non, fringilla a enim. Mauris molestie turpis sed arcu suscipit et malesuada sapien porta. Nam luctus purus lacinia tellus adipiscing sagittis. Fusce in quam sit amet augue sollicitudin hendrerit. Vestibulum sollicitudin malesuada eros eu elementum. Nulla varius, turpis sit amet consequat dignissim, purus nibh tristique odio, in fringilla velit justo elementum lectus. Sed faucibus, purus quis feugiat ornare, leo magna mollis quam, eget mollis est tellus vel nibh. Praesent interdum mollis justo eget dignissim.
				</p><p>
				Nunc sed leo massa. Sed ullamcorper ultrices feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porta, eros in sodales bibendum, nibh odio viverra velit, quis euismod dolor ligula a felis. Nulla at ante non diam ullamcorper imperdiet. Etiam pharetra leo ut purus dictum consectetur. Phasellus malesuada bibendum dignissim. Quisque in nunc quis dui congue vehicula vitae et enim. Donec vehicula felis ac enim posuere dictum. Donec pretium suscipit facilisis.
				</p><p>
				Cras ut velit ut eros cursus consequat. Quisque ultrices massa vel justo congue tincidunt. Aliquam porttitor molestie nulla ut imperdiet. Proin nisi eros, vestibulum tincidunt eleifend eu, luctus aliquam massa. In non nunc mi. Maecenas iaculis est a sem hendrerit vel posuere tellus imperdiet. Mauris euismod libero nec sapien egestas vitae mattis ante dignissim. Vestibulum ut erat tortor, ut tristique sapien. Nulla tortor sapien, hendrerit ut laoreet ac, iaculis ut turpis.
				</p>
			</div>
			<div id="dialog-tabs2">
				
			</div>
			<div id="dialog-tabs3">
				
			</div>
			<div id="dialog-tabs4">
				
			</div>
		</div>
		<div id="dialog-timeline">&nbsp;</div>
	</div>

<!--
			<ul>
				<li><a href="#tab-rooms">Rooms</a></li>
				<li><a href="#tab-devices">Devices</a></li>
			</ul>
			<div id="tab-rooms">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
			<div id="tab-devices">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
-->
</body>
</html>
